<div class="card card-accent-info">
  <div class="card-body">
    <h4 class="card-title">[autoResize] option</h4>
    <button class="btn btn-outline-primary" (click)="autoResize = !autoResize">{{autoResize ? 'Disable' : 'Enable' }}</button>
    <div ngResizable class="resizable-widget mt-4 pb-4" rzContainment="#container" rzHandles="all">
      <div class="widget-header">Resizable</div>
      <div echarts [options]="options" [autoResize]="autoResize" style="height: 100%"></div>
    </div>
    <div class="mt-4">
      <tabset>
        <tab heading="html">
          <markdown [data]="demo_html | language: 'html'"></markdown>
        </tab>
        <tab heading="component">
          <markdown [data]="demo_ts | language: 'typescript'"></markdown>
        </tab>
        <tab heading="scss">
          <markdown [data]="demo_scss | language: 'scss'"></markdown>
        </tab>
      </tabset>
    </div>
  </div>
</div>